<script setup>
import InfiniteScroll from "@/components/InfiniteScroll.vue";
const list = [
  "消息1：欢迎使用滚动消息列表！",
  "消息2：这是一个基于 Vue 3 的滚动动画示例。",
  "消息3：你可以在这里添加更多消息。",
  "消息4：滚动动画是通过 CSS 实现的。",
  "消息5：Vue 3 的 <script setup> 语法让代码更简洁！",
  "消息6：今天天气不错，适合户外活动！",
  "消息7：最新版本的 Vue.js 已发布，快去更新吧！",
  "消息8：JavaScript 是一种非常灵活的编程语言。",
  "消息9：HTML 和 CSS 是前端开发的基础，不容忽视！",
  "消息10：Vue.js 社区非常活跃，有很多优秀的插件和工具。",
];
</script>
<template>
  <div>
    <h3>vertical</h3>
    <InfiniteScroll direction="up">
      <div v-for="item in list" class="list-item1">{{ item }}</div>
    </InfiniteScroll>
    <h3>horizontal</h3>
    <InfiniteScroll direction="left" :stepTime="10">
      <div v-for="item in list" class="p-2">
        <div class="list-item2">{{ item }}</div>
      </div>
    </InfiniteScroll>
  </div>
</template>
<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "HanSans-Regular";
}
.list-item1 {
  background-color: azure;
  border-radius: 10px;
}
.list-item2 {
  background-color: azure;
  width: 80px;
}
</style>
